import { connect } from 'dva'
import styles from './Contract.scss'
import { InputItem, ListView, Toast } from 'antd-mobile'
import ReactSVG from 'react-svg'
const Contract = ({ dispatch, sign, dataSource}) => {
  // 修改状态
  const changeState = (state) => {
    dispatch({
      type: 'contractSign/getSign',
      payload: {
        sign: state
      }
    })
  }
  const Mybody = (props) => {
    return (
      <div className={styles.searchList}>
        {props.children}
      </div>
    )
  }
  const onEndReached = () => {
    console.log(`触底了`)
    dispatch({
      type: 'contractSign/getDataSource',
      payload:{
        title: 'xxxx',
        code: '就是干',
        type: 'OTO'
      }
    })
  } 
  // 页面跳转
  const jumpPage = (dataRow) => {
    Toast.loading('加载中', 1, () => {
      console.log(`加载成功`)
    })
    dispatch({
      type: 'modules/getModules',
      payload: {
        pathname: '',
        businessId: '1231241225',
        process: 'contractSign',
        title: '电子合同签署',
        query:dataRow
      }
    })
  }
  const RenderList = () => {
    const row = (dataRow) => {
      return (
        <div className={styles.itemContent} onClick={() => jumpPage(dataRow)}>
              {sign === false ? 
                <div className={styles.unSign}>未签</div> : <div className={styles.alreadySign}>已签</div>
              }
              <div className={styles.textContainer}>
                <div className={styles.textTitle}>
                  {dataRow.title}
                </div>
                <div className={styles.productContainer}>
                  { dataRow.type === 'OTO' ? <div className={styles.productType}>
                    OTO产品
                  </div> : null
                  }
                  <div className={styles.textCode}>
                    {dataRow.code}
                  </div>
                </div>
              </div>
              <div className={styles.svgContainer}>
                <ReactSVG src='svg/contract/next.svg' svgClassName={styles.nextSvg}></ReactSVG>
              </div>
        </div>
      )
    }
    return (
      <div>
        { dataSource ? 
          <ListView
            dataSource={dataSource}
            renderFooter={() => (<div className={styles.loading}>
              点击或上拉加载更多
            </div>)}
            renderRow={row}
            scrollRenderAheadDistance={0}
            onEndReached={onEndReached}
            onEndReachedThreshold={200}
            renderBodyComponent={() => <Mybody />}
           >
          </ListView> : null
      }
      </div>
      
    )
  }
  
  return (
    <div className={styles.contractContainer}>
      <div className={sign === 'cancel' ?  'cancelContractContainer' : 'originSize'}>
        <div className={sign === 'cancel' ? `${styles.search} cancelSearch` : styles.search }>
          <InputItem placeholder='请输入产品名称 / 产品代码' onFocus={() => changeState('cancel')}>
            <ReactSVG src='svg/contractSign/search.svg' svgClassName={styles.svgSize}></ReactSVG>
          </InputItem>
          {sign === 'cancel' ? <div className={styles.cancelSize} onClick={() => changeState(false)}>取消</div> : 
            <div style={{display: 'flex'}}>
              <div className={sign === false ? `${styles.buttonSize} ${styles.activeSize}` : styles.buttonSize} onClick={() => changeState(false)}>未签</div>
              <div className={sign === true ? `${styles.buttonSize} ${styles.activeSize}` : styles.buttonSize} onClick={() => changeState(true)}>已签</div>
            </div>
          }
        </div>
        {
          sign === 'cancel' ? <div className={styles.contentContainer}>
            <div className={styles.wantTitle}>
              您可能想找
            </div>
            <div className={styles.buttonOptions}>
              <div className={styles.buttonContainer}>
                <div className={styles.buttonSize}>天天增系列</div>
                <div className={styles.buttonSize}>灵通丰利系列</div>
                <div className={styles.buttonSize}>灵通快利系列</div>
              </div>
              <div className={styles.buttonContainer}>
                <div className={styles.buttonSize}>宝鼎系列</div>
                <div className={styles.buttonSize}>申万系列</div>
              </div>
            </div>
            <div className={`${styles.wantTitle} ${styles.orTitle}`}>
              或者是
            </div>
            <div className={styles.buttonOptions}>
              <div className={styles.buttonContainer}>
                <div className={styles.buttonSize}>可售</div>
                <div className={styles.buttonSize}>待售</div>
                <div className={styles.buttonSize}>停售</div>
                <div className={styles.buttonSize}>可转让</div>
                <div className={styles.buttonSize}>已签</div>
              </div>
            </div>
          </div> : <RenderList></RenderList>
        }
      </div>
    </div>
    
  )
}

export default connect(state => state.contractSign)(Contract)